<template>
	<view class="leesonjoin">
		<view class="myLessonDetail margin-top padding-sm">
			<view class="todaylearning">
				<text class="text-xl">今日学习:</text>
				<text class="text-xl margin-right" style="color: #39B54A;">{{today_study_time}}小时</text>
				<button class="cu-btn round bg-green shadow margin-left"  @click="qiandao">{{doescome}}</button>
			</view>
		</view>
		<view class="alreadyStudy">
			<view class="studyList">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 已加入课程
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in myClassList" :key="item.id"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"  @click="gotovideodetail(item.id)">
						<image :src="item.image_url" mode="" style="width: 100rpx;height: 100rpx;position: absolute;left: 44rpx;margin: auto;border-radius: 16rpx;"></image>
						<view class="content">
							<view class="text-grey">{{item.name}}</view>
							<view class="text-cut">
								<text class="text-green margin-right-xs text-sm">{{item.desc}}</text>
							</view>
						</view>
						<view class="move">
							<view class="bg-red" @click="deleteClass(item.id)">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				today_study_time:0,
				doescome:'',
				myClassList:[],
				listTouchStart: 0,
			}
		},
		onShow() {
			this.getLearnTimeDay()
			this.getJoinAlready()
		},
		onPullDownRefresh() {
			this.getLearnTimeDay()
			this.getJoinAlready()
		},
		methods: {
			gotovideodetail(id){
				uni.navigateTo({
				    url: `../videodetail/videodetail?id=${id}`
				});
			},
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async getLearnTimeDay(){
				let res = await this.$myRuquest({
					url:'/user_info/'
				})
				uni.stopPullDownRefresh();
				this.today_study_time = res.data.today_study_time.toFixed(3)
				if(res.data.is_sing==true){
					this.doescome = '已签到'
				}else{
					this.doescome = '签到'
				}
			},
			async qiandao(){
				let res = await this.$myRuquest({
					url:'/sing_in/',
					method:'POST'
				})
				this.doescome = '已签到'
				uni.showToast({
					title:`${res.data.msg || res.data.error}`
				})
			},
			async getJoinAlready(){
				let res = await this.$myRuquest({
					url:'/my_course/'
				})
				uni.stopPullDownRefresh();
				this.myClassList = res.data.results
			},
			deleteClass(id){
				this.$myRuquest({
					url:`/collection_course/${id}/`,
					method:'POST'
				}).then(res=>{
					this.getJoinAlready()
				})
			}
		}
	}
</script>

<style lang="scss">
	.leesonjoin{
		.qiun-charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
		.charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		.cu-list.menu-avatar>.cu-item .content{
			left: 176rpx;
		}
	}
</style>